<template>
  <div class="ceshi">
    <h1>子组件</h1>
    <h4>姓名：{{myName}}，年龄：{{myAge}}</h4>

    <button @click="updateName">修改姓名</button>
    <button @click="updateAge">修改年龄</button>
    <Car></Car>
  </div>
</template>
<script>
import Car from '../components/car.vue'

export default {
  props: ['name', 'age'],
  components: {
    Car
  },
  data() {
    return {
      wdf: '王德发',
      // 中转props传递过来的数据
      myName: this.name,
      myAge: this.age
    }
  },
  mounted() {
    this.$emit('closeChange', this.wdf);
  },
  methods: {

    //子传父
    updateName() {
      this.myName = '李四'
      this.$emit('updateName', this.myName)
    },
    updateAge() {
      this.myAge = 22
      this.$emit('updateAge', this.myAge)
    }
  }
}
</script>
<style scoped lang='scss'>
.ceshi {
  border: 1px solid red;
  padding: 10px;
}
h1 {
  text-align: center;
}
</style>